<template>
  <!-- 标签模板 => 对应记忆对照html文件中的<html>标签结构 -->
  <!-- vue模板标签中，只能有一个根标签 -->
  <div id="app">
    <!-- 3. 使用:  通过标签的形式，来使用组件 -->
    <Demo></Demo>
  </div>
</template>

<script>
// js相关的代码
// 在js中 有一个 export default {} 结构， 在这个结构中需要遵循vue的代码规则

// 1.引入:  import 引入组件
import Demo from './components/10-v-for数组循环.vue'
export default {
  name: 'App',
  // 2.注册: 在components对象中注册组件
  components: {
    Demo
  }
}
</script>

<style scoped>
/* 当前组件样式表 - 期望每个组件中的style 标签只能影响当前组件中的标签内容 */
/* 只需要在style 标签中添加一个属性 - scoped 就可以让样式只作用于当前组件的标签 */
/* 原理: scoped 属性，会为每一个样式表自动添加当前组件中所被设置的自定义属性（data-v-hash随机数），形参一个复合选择器，而能够被选中的标签均存在于当前组件中，所以可以被区分开 */
/* 规律/要求: 只要组件需要设置style样式，就在style标签中添加 scoped 属性 */
</style>
